<html>
  <head>
    <style type="text/css">
      body { font-family:sans-serif; font-size:76%; line-height:150%; }
      div.gadgetInstance { margin:20px; float:left; }
      div.gadgetInstance iframe { margin: 0; padding: 0; border: 1px solid black; }
      div#header { background-color:#eef; padding:10px; }
      div#leftBar { background-color:#eef; padding:10px; height:100%; width:100px; float:left; padding-top:100px;  }
      div#content { padding-left: 120px; }
      
    </style>
    
    <script type="text/javascript">
      var adSizes = [
        {size: "728x90",  name: "LEADERBOARD",      enabled: true},
        {size: "468x60",  name: "BANNER",           enabled: false},
        {size: "200x200", name: "SMALL_SQUARE",     enabled: false},
        {size: "250x250", name: "SQUARE",           enabled: false},
        {size: "300x250", name: "MEDIUM_RECTANGLE", enabled: false},
        {size: "336x280", name: "LARGE_RECTANGLE",  enabled: false},
        {size: "120x600", name: "SKYSCRAPER",       enabled: false},
        {size: "160x600", name: "WIDE_SKYSCRAPER",  enabled: false}
      ];

      // cookie functions by PPK: http://www.quirksmode.org/js/cookies.html      
      function createCookie(name,value,days) {
        if (days) {
          var date = new Date();
          date.setTime(date.getTime()+(days*24*60*60*1000));
          var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
      }

      function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
          var c = ca[i];
          while (c.charAt(0)==' ') c = c.substring(1,c.length);
          if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
      }

      function eraseCookie(name) {
        createCookie(name,"",-1);
      }

      // Displays the gadgets in the center of the screen.
      function showGadgets(gadgetUrl) {        
        if (document.getElementById('cached').checked) {
          var cachedStr = '';
        } else {
          var cachedStr = '&amp;nocache=2147483647';
        }
      
        var demoDiv = document.getElementById("gadgetdemo"); 
        demoDiv.innerHTML = "";
        
        var choicesDiv = document.getElementById("sizeChoices");
        var choices = choicesDiv.getElementsByTagName("input");
        for (var i = 0; i < choices.length; i++) {
          if (choices.item(i).checked) {
            var size = choices.item(i).id;
            var dims = size.split("x");
            
            var newHTML = '';
            newHTML += '<div class="gadgetInstance" style="width:' + dims[0] + '; height:' + (parseInt(dims[1]) + 30) + ';">';
            newHTML += 'Size: ' + size + '<br/>';
            newHTML += '<iframe scrolling="no" frameborder="0" width="' + dims[0] + '" height="' + dims[1] + '" src="http://gmodules.com/ig/ifr?synd=open' + cachedStr + '&amp;url=' + gadgetUrl + '"/>';
            newHTML += '</div>';
            
            demoDiv.innerHTML += newHTML;
          }
        }
        
      }
      
      // adds a new size to the list and re-draws the selections
      function addSize() {
        var newSize = prompt("Enter new size, e.g. 160x160: ");
        if (!newSize) return false;
        
        // validate new size
        var dims = newSize.split("x");
        var x = parseInt(dims[0]);
        var y = parseInt(dims[1]);
        
        if ((x > 0) && (y > 0)) {
          adSizes.push({size:x + "x" + y, name: "", enabled: false});
          initSizeChoices();
        } else {
          alert("Invalid size.");
        }
      }
      
      // upon checking/unchecking a size, this function
      // updates the array in memory so that if the user
      // adds a new size, they don't all revert to their
      // default checkedness
      function setChecked(idx) {
        var choicesDiv = document.getElementById("sizeChoices");
        var choices = choicesDiv.getElementsByTagName("input");
        var choice = choices.item(idx);
        if (choice.checked == true) {
          adSizes[idx].enabled = true;
          createCookie(choice.id, 1);
        } else {
          adSizes[idx].enabled = false;
          createCookie(choice.id, 0);
        }
      }
      
      // turns caching of ads on and off when a user clicks the cache checkbox
      function toggleCache(obj) {
        var val;        
        if(obj.checked) {
          val = 1;
        }
        else {
          val = 0;
        }
        createCookie("cached", val);
      }
      
      // parses out a URL parameter
      function getUrlParam(qName) {
        var regex = new RegExp('[?&]' + qName + '=([^&#]*)');
        var result = regex.exec(window.location.href);
        if (result != null) {
          return result[1];       
        } else {
          return null;
        }          
      }
      
      // Displays the choices along the side of the screen. 
      function initSizeChoices() {
        var checked, cookie;

        // set size checkboxes
        var divSC = document.getElementById("sizeChoices");
        divSC.innerHTML = "";
        
        for (var i = 0; i < adSizes.length; i++) {
          cookie = readCookie(adSizes[i].size);
          if (cookie == 1) {
            adSizes[i].enabled = true;
          }
          else if (cookie == 0) {
            adSizes[i].enabled = false;
          }
        
          if (adSizes[i].enabled) {
            checked = 'checked="checked" ';
          } else {
            var checked = '';
          }
          divSC.innerHTML += '<input type="checkbox" name="' + adSizes[i].size + '" id="' + adSizes[i].size + '" ' + checked + ' onclick="setChecked(' + i + ');" /> <label for="' + adSizes[i].size + '">' + adSizes[i].size + '</label><br/>';
        }
        divSC.innerHTML += '<input type="button" value="Add..." onclick="addSize();" />';
        
        // set cache checkbox
        cookie = readCookie("cached");
        var checkbox = document.getElementById('cached');
        if(cookie == 1 || cookie == null) {
          checkbox.checked = true;
        }
        else if(cookie == 0) {
          checkbox.checked = false;
        }
      }
      
      // initializes the app
      function initMultisizeApp() {
        initSizeChoices();
        var passedUrl = getUrlParam('url');
        if (passedUrl != null) {
          document.getElementById('gadgeturl').value = passedUrl;
        }
        showGadgets(document.getElementById('gadgeturl').value);
      }
      
      window.onload = initMultisizeApp;

    </script>
  </head>
  
  <body>
    <div id="leftBar">
      <div id="sizeChoices">
      </div>
    </div>
    <div id="content">
      <div id="header">
        <h1>Gadget Multisize Demo</h1>
        <input type="text" size="75" name="gadgeturl" id="gadgeturl" value="http://gadget-doc-examples.googlecode.com/svn/trunk/multisize-viewer/multisize-demo.xml" />
        <input type="checkbox" name="cached" id="cached" checked="checked" onclick="toggleCache(this);"/><label for="cached">Cached</label>
        <input type="button" value="Show" onclick="showGadgets(document.getElementById('gadgeturl').value);" />
      </div>
      <div id="gadgetdemo">
      </div>
    </div>
  </body>
</html>
